<template>
	<view>
		<!-- 轮播图 -->
		<view class="swiper">
			<swiper :indicator-dots="true" :autoplay="autoplay" :circular="true" :interval="3000" :duration="1000" >
				<swiper-item >
					<image :src="barner.scenicPicture1" mode=""></image>
				</swiper-item>
				<swiper-item >
					<image :src="barner.scenicPicture2" mode=""></image>
				</swiper-item>
				<swiper-item >
					<image :src="barner.scenicPicture3" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
	<!-- 	<view class="swiper"><u-swiper :list="barner" :height="340"></u-swiper></view> -->
		<!-- 景区详情 -->
		<view class="scene_details">
			<view class="scene_basic">
				<titleglobal :title="'景区详情'"></titleglobal>
				<view class="scene_title flex flexBei">
					<text>{{ this.info.scenicName || '暂无' }}</text>
					<view class="iconfont inview" :class="(isCollection? 'icon-shoucang1':'icon-shoucang')" @click="collectionOperation">
					</view>
				</view>
				<view class="internet flex flexBei textHd">
					<text>官方网站:</text>
					<text class="info_content">{{ this.info.scenicUrl || '暂无' }}</text>
				</view>
				<view class="telphone flex flexBei textHd">
					<text>官方电话:</text>
					<text class="info_content">{{ this.info.scenicPhone || '暂无'}}</text>
				</view>
				<view class="whether flex flexBei">
					<text>天气:</text>
					<view>
						<text class="info_content">{{ this.info.weather || '暂无'}}</text>
					</view>
				</view>
				<view class="navigation flex flexBei">
					<text>景区地址:</text>
					<view class="flex" style="width: 520rpx;" >
						<view class="info_content textHd" style="width: 420rpx;">{{ this.info.scenicAddress || '暂无'}}</view>
						<view class="iconfont inview icon-daohang1 tothere" @click="Isnavigation = true"></view>
					</view>
				</view>
			</view>
			<view class="passage">
				<text class="title">景区介绍:</text>
				<text class="info_content">{{ this.info.scenicContent || '暂无'}}</text>
			</view>
		</view>
		<!-- 入园须知 -->
		<view class="scene_know">
			<titleglobal :title="'入园须知'"></titleglobal>
			<view class="contentItem">
				<text class="name">开放时间</text>
				<text class="info_content">{{ this.info.openTime || '暂无'}}</text>
			</view>
			<view class="contentItem">
				<text class="name">停车场</text>
				<text class="info_content">{{ this.info.park || '暂无'}}</text>
			</view>
			<view class="contentItem">
				<text class="name">WIFI</text>
				<text class="info_content">{{ this.info.wifi || '暂无'}}</text>
			</view>
			<view class="contentItem">
				<text class="name">手机充电</text>
				<text class="info_content">{{ this.info.mobileCharge || '暂无'}}</text>
			</view>
			<view class="contentItem">
				<text class="name">园内交通</text>
				<text class="info_content">{{ this.info.traffice || '暂无'}}</text>
			</view>
			<view class="contentItem">
				<text class="name">卫生间</text>
				<text class="info_content">{{ this.info.toilet || '暂无'}}</text>
			</view>
			<view class="contentItem">
				<text class="name">餐厅</text>
				<text class="info_content">{{ this.info.restaurant || '暂无'}}</text>
			</view>
		</view>
		<!-- 游玩贴士 -->
		<view class="scene_recommendkonw">
			<titleglobal :title="'游玩贴士'"></titleglobal>
			<view class="recommendItem info_content">{{ this.info.remind || '暂无'}}</view>
		</view>
		<!-- 游客点评 -->
		<view class="scene_comment">
			<titleglobal :title="'游客点评'"></titleglobal>
			<Comment :list="commentList"></Comment>
			<u-empty mode="list" text="暂无评论" v-show="this.commentList.length == 0"></u-empty>
			<view class="more" @click="getMoreComments" v-show="(commentTotal > 6)">
				查看更多
			</view>
		</view>
		<!-- 推荐景点 -->
		<view class="scene_recommend">
			<titleglobal :title="'推荐景点'"></titleglobal>
			<scene-list :list="travelRecommend"></scene-list>
			<u-empty mode="list" text="暂无推荐景点" v-show="this.travelRecommend.length == 0"></u-empty>
		</view>
		<!-- 底部 -->
		<view class="scene_bottom flex">
			<view class="input"><input type="text" v-model="comments" placeholder="发表你的评论" /></view>
			<view class="send" @click="sendComment">评论</view>
		</view>
		<!-- 提示栏 -->
		<u-toast ref="uToast"></u-toast>
		<!-- 导航弹框 -->
		<u-modal v-model="Isnavigation" show-cancel-button width="70%" ref="uModal"  title="导航方式" @confirm="startNavigation">
			<view class="slot-content navigates">
					<view class="flex flexCen"  :class="{active: (navigateCurrent == 0)}" @click="changeCurrent(0)">
							<image src="../../static/images/gaode.png" ></image>
					</view>
					<view class="flex flexCen" :class="{active: (navigateCurrent == 1)}" @click="changeCurrent(1)">
						<image src="../../static/images/tenxun.png"></image>
					</view>
					<view class="flex flexCen" :class="{active: (navigateCurrent == 2)}" @click="changeCurrent(2)">
						<image src="../../static/images/baidu.png" ></image>
					</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
import SceneList from '../../components/scene.vue';
import titleglobal from '../../components/title.vue';
import Comment from '../../components/comments.vue'

import {gaode, tengxun, baidu } from '../../lib/config/map.js'
import {utf16toEntities, uncodeUtf} from '../../utils/emjoy.js'
import { mapState} from 'vuex'
import { getscenicdetails, getscenerecommend, getsceniccomments, sendscenic,
 iscolection, collectdeletescenic, collectsaddcenic } from '../../api/scenic.js';
export default {
	components: {
		SceneList,
		titleglobal,
		Comment
	},
	data() {
		return {
			barner: {},
			comments: '',
			autoplay: true,
			travelRecommend: [],
			info: {},
			Isnavigation: false, // 导航框
			isCollection: false, // 是否收藏
			params: {
				scenicId: '',
				pageNum: 1,
				pageSize: 6
			},
			commentList: [],
			commentTotal: 0,
			navigateCurrent: 0,
			ms: null,
			timeID: null
		};
	},
	watch: {
		isCollection(newValue, oldValue) {
		    if (newValue !== oldValue) {
		     // 数据变化了，执行逻辑，这里做好防抖。
		    this.ms = 3000;
		    clearTimeout(this.timeID);
		    this.timeID = setTimeout(() => {
		      
		     }, this.ms)
		      }
		    }
	},
	onLoad(e) {
		this.params.scenicId = e.id;
		uni.setNavigationBarTitle({
			title: e.title
		});
	},
	mounted() {
		this.getSceneDetails();
		this.getSceneRecommend();
		this.getTravelComment();
	},
	computed: {
		...mapState(['address'])
	},
	methods: {
		// 获取景点详情
		async getSceneDetails() {
			const res = await getscenicdetails({ scenicId: this.params.scenicId });
			this.info = res.data.data.data  || {};
			const {scenicPicture1, scenicPicture2, scenicPicture3} = res.data.data.data
			this.barner = {...this.barner,scenicPicture1,scenicPicture2,scenicPicture3}
			this.IsCollection()
		},
		// 获取附近三个景点
		async getSceneRecommend() {
			const res = await getscenerecommend({ scenicId: this.params.scenicId });
			this.travelRecommend = res.data.data.data.filter((s) => {
			   return s != null
			}) || [];
		},
		// 获取景点评论
		async getTravelComment() {
			const res = await getsceniccomments(this.params);
			this.commentList = res.data.data.data
			this.commentTotal = res.data.data.total
		},
		// 发表评论
		async sendComment() {
			if (this.comments === '') {
				this.$refs.uToast.show({
					title: '评论内容不能为空',
					position: 'top'
					})
				return 
			} else {
				const params = {
					userId: this.$store.state.userinfo.userId,
					scenicId: this.params.scenicId,
					content: utf16toEntities(this.comments)
				};
				const res = await sendscenic(params);
				this.comments = ''
				this.getTravelComment();
			}
		},
		// 是否收藏景区
		async IsCollection () {
			const params = {
				userId: this.$store.state.userinfo.userId,
				scenicId: this.params.scenicId,
			}
			const res = await iscolection(params)
			this.isCollection = res.data.data.isCollection
		},
		collectionOperation () {
			this.debounce(this.collectionUpdate)
		},
		// 收藏与取消收藏
		async collectionUpdate () {
			const params = {
				userId: this.$store.state.userinfo.userId * 1,
				scenicId: this.params.scenicId * 1,
			}
			if (this.isCollection) { // 取消收藏
				await collectdeletescenic(params)
			} else { // 收藏景区
				await collectsaddcenic(params)
			}
			this.getSceneDetails()
		},
		// 查看更多评论
		getMoreComments () {
			uni.navigateTo({
				url: `../comments/comments?id=${this.params.scenicId}`
			})
		},
		// 改变导航方式	
		changeCurrent (index) {
			this.navigateCurrent = index
		},
		// 导航跳转
		startNavigation () {
			const params = {
				start: {
					latitude: this.address.latitude,
					longitude: this.address.longitude,
					name: this.address.address
				},
				destination: {
					latitude: this.info.latitude,
					longitude: this.info.longitude,
					name: this.info.scenicAddress
				}
			}
			if (this.navigateCurrent == 0) {
				window.location.href = gaode(params)
			} else if (this.navigateCurrent == 1) {
				window.location.href = tengxun(params)
			} else {
				uni.showToast({
					title: '暂不支持',
					position:'top'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	/* 页面文字内容样式 */
	.info_content  {
		color: #999;
		font-size: 24rpx;
		padding-left: 12rpx;
	}
/* 轮播图 */
.swiper {
	width: 100%;
	height: 340rpx;
	image {
		width: 100%;
		height: 100%;
	}
	video {
		width: 100%;
		heigth: 100%;
	}
}
/* 景区详情 */
.scene_details {
	margin-top: $margin_top;
	font-size: 32rpx;
	.scene_basic {
		padding: 12rpx 24rpx;
		background-color: #fff;
		line-height: 72rpx;
	}
	.scene_title {
		font-size: 42rpx;
		font-weight: bolder;
		.icon-shoucang {
			font-size: 50rpx;
		}
		.icon-shoucang1 {
			color: red;
		}
	}
	.whether {
		line-height: 60rpx;
		image {
			width: 60rpx;
			height: 60rpx;
			vertical-align: text-bottom;
		}
	}
	.navigation {
		border-top: 1rpx solid #fafafa;
		background-color: #fff;
		line-height: 72rpx;
		border-bottom: 1rpx solid #fafafa;
		text-align: right;
		.tothere {
			font-size: 48rpx;
			color: $theme-color;
			padding-left: 18rpx;
		}
	}
	.passage {
		padding: 12rpx 24rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		background-color: #fff;
		.title {
			font-size: 32rpx;
			font-weight: bold;
		}
	}
}
/* 入园须知 */
.scene_know {
	background-color: #fff;
	margin-top: $margin_top;
	padding: 12rpx 24rpx;
	font-size: 24rpx;
	.contentItem {
		border-top: 1rpx solid #fafafa;
		line-height: 72rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.name {
			font-size: 28rpx;
			padding-right: 16rpx;
		}
	}
}
/* 景点评论 */
.scene_comment {
	margin-top: $margin_top;
	padding: 0 24rpx;
	background-color: #fff;
	.more {
		text-align: center;
		line-height: 72rpx;
		color: #2979FF;
	}
	margin-bottom: $margin_top;
}
/* 游玩贴士 */
.scene_recommendkonw {
	padding: 12rpx 24rpx;
	margin-top:$margin_top;
	background-color: #fff;
	.recommendItem {
		text-indent: 2em;
		font-size: 24rpx;
		line-height: 42rpx;
		border-bottom: 1rpx solid #fafafa;
	}
}
/* 景点推荐 */
.scene_recommend {
	padding-bottom: 60rpx;
	.title_header {
		padding: 0 24rpx;
	}
}
/* 底部 */
.scene_bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	align-items: center;
	background-color: #fafafa;
	height: 112rpx;
	padding: 0 24rpx;
	.input {
		width: 580rpx;
		border-radius: 12rpx;
		background-color: #f2f2f2;
		height: 72rpx;
		box-sizing: border-box;
		input {
			height: 64rpx;
		}
	}
	.send {
		margin-left: 16rpx;
		width: 120rpx;
		background-color: $theme-color;
		color: #fff;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		border-radius: 18rpx;
	}
}

/* 弹框 */
.navigates {
	display: flex;
	justify-content: space-around;
	padding: 32rpx 12rpx;
	image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 12rpx;
	}
	.active {
		background-color: #f0f0f0;
		width: 100rpx;
		height: 100rpx;
	}
	}
</style>
